<script setup lang="ts">
import { ref, computed } from 'vue'

// 基础计算属性
const firstName = ref('张')
const lastName = ref('三')
const fullName = computed(() => {
  return firstName.value + lastName.value
})

// 可写计算属性
const fullName2 = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(newValue: string) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

// 带缓存的计算属性 vs 方法
const count = ref(0)
const now = computed(() => Date.now())
const getNow = () => Date.now()

// 计算属性示例：购物车
const items = ref([
  { name: '商品1', price: 100, quantity: 2 },
  { name: '商品2', price: 200, quantity: 1 },
  { name: '商品3', price: 300, quantity: 3 }
])

const total = computed(() => {
  return items.value.reduce((sum, item) => {
    return sum + item.price * item.quantity
  }, 0)
})

// 更新商品数量
const updateQuantity = (index: number, delta: number) => {
  const newQuantity = items.value[index].quantity + delta
  if (newQuantity >= 0) {
    items.value[index].quantity = newQuantity
  }
}
</script>

<template>
  <div class="computed-demo">
    <h2>计算属性示例</h2>

    <section>
      <h3>1. 基础计算属性</h3>
      <div>
        <input v-model="firstName" placeholder="姓">
        <input v-model="lastName" placeholder="名">
        <p>全名: {{ fullName }}</p>
      </div>
    </section>

    <section>
      <h3>2. 可写计算属性</h3>
      <div>
        <input v-model="fullName2" placeholder="输入 '姓 名'">
        <p>姓: {{ firstName }}</p>
        <p>名: {{ lastName }}</p>
      </div>
    </section>

    <section>
      <h3>3. 计算属性缓存 vs 方法</h3>
      <div>
        <p>计数器: {{ count }}</p>
        <button @click="count++">增加计数</button>
        <p>计算属性时间戳 (缓存): {{ now }}</p>
        <p>方法时间戳 (无缓存): {{ getNow() }}</p>
      </div>
    </section>

    <section>
      <h3>4. 购物车示例</h3>
      <div class="cart">
        <div v-for="(item, index) in items" :key="index" class="cart-item">
          <span>{{ item.name }}</span>
          <span>单价: ¥{{ item.price }}</span>
          <div class="quantity-control">
            <button @click="updateQuantity(index, -1)">-</button>
            <span>{{ item.quantity }}</span>
            <button @click="updateQuantity(index, 1)">+</button>
          </div>
          <span>小计: ¥{{ item.price * item.quantity }}</span>
        </div>
        <div class="cart-total">
          总计: ¥{{ total }}
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.computed-demo {
  padding: 20px;
}

section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

input {
  margin: 5px;
  padding: 5px;
}

button {
  margin: 0 5px;
  padding: 5px 15px;
}

.cart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-total {
  margin-top: 20px;
  padding: 10px;
  font-weight: bold;
  text-align: right;
}
</style> 